<template>
    <div class="app-container">

        <div class="filter-container clearfix">
            <router-link to="/setting/city/add">
                <el-button type="primary">+添加城市</el-button>
            </router-link>
        </div>
        <el-table class="table-compact" :data="list" v-loading.body="listLoading"
                  element-loading-text="拼命加载中" stripe fit
                  highlight-current-row>
            <el-table-column
                    prop="name"
                    label="名称">
            </el-table-column>
            <el-table-column
                    prop="pinyin"
                    label="拼音">
            </el-table-column>
            <el-table-column
                    prop="isDeleted"
                    label="状态">
                <template scope="scope">
                    <div>
                        <el-tag v-if="!scope.row.isDeleted" type="primary">运营中</el-tag>
                        <el-tag v-else type="gray">关闭</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template scope="scope">
                    <router-link :to="'/setting/city/'+scope.row._id">
                        <el-button type="text" >编辑</el-button>
                    </router-link>
                    <el-button @click="deleteInfo(scope.row._id)" type="text" >删除</el-button>
                </template>
            </el-table-column>

        </el-table>

    </div>
</template>

<script>
  import fetch from '@/utils/fetch';
  import {parseTime} from '@/utils';

  export default {
    components: {},
    data() {
      return {
        list: null,
        listLoading: true,
      }
    },
    watch: {

    },
    created() {
      this.fetchData();
    },
    computed: {

    },
    methods: {
      fetchData() {
        this.listLoading = true;
        fetch({
          url: '/cities',
          method: 'get'
        }).then(res => {
          this.list = res.data;
          this.listLoading = false;
        })


      },
      deleteInfo(id){

      },


    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .checkbox-item{
        display: block;
        margin: 6px 20px 6px 10px;
    }
    .img{
        margin: 8px 0;
        width: 80px;
        height: 60px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        &[lazy=error],&[lazy=loading]{
            background-size: 50%;
        }
    }
    .time{
        word-break:break-all ;
    }
    .search-input{
        width: 300px;
    }

</style>
